<template>
  <div :style="{ display: 'flex' }" id="infoCardDeleClass">
    <div>
      <a-space direction="vertical" size="large" class="inputHere">
        <a-input-search
          :style="{ width: '320px' }"
          v-model="searchKey"
          placeholder="请输入查询关键字"
          @press-enter="search"
          @search="search"
        />
      </a-space>
    </div>
    <div>
      <a-card
        :style="{ width: '360px' }"
        class="card"
        v-for="info in infos"
        :key="info.classId"
        :title="info.infoTitle"
      >
        {{ info.infoText }}<br />
        <a-button class="btDelete" @click="deleteInfo(info.infoId)"
          >Delete</a-button
        >
      </a-card>
    </div>
  </div>
</template>
      
  <script>
import axios from "axios";

export default {
  data() {
    return {
      infos: [
        {
          infoId: 1,
          classId: 1000,
          infoTitle: "班级公告",
          infoText: "这是班级公告",
          isDelete: 0,
        },
        {
          infoId: 1,
          classId: 1000,
          infoTitle: "班级公告",
          infoText: "这是班级公告",
          isDelete: 0,
        },
      ],
      searchKey: "",
    };
  },
  methods: {
    deleteInfo(id) {
      axios
        .post("/deleteClassInfoo", {
          classInfoId: id,
        })
        .then((response) => {
          if (response.data) {
            alert("删除成功");
          } else {
            alert("删除失败");
          }
        })
        .catch(function (error) {
          console.log(error);
        });
      this.search();
    },
    search() {
      axios
        .post("/classInfo", {
          userClassId: this.$store.state.user.loginUser.classId,
          searchKey: this.searchKey,
        })
        .then((response) => {
          this.infos = response.data;
        })
        .catch(function (error) {
          console.log(error);
        });
    },
  },
  mounted() {
    this.search();
  },
};
</script>
        
      <style >
#infoCardDeleClass {
  flex-direction: column;
  padding: 100px;
}
#infoCardDeleClass .card {
  flex-direction: row;
  margin: 20px;
}
#infoCardDeleClass .btDelete {
  /* margin-left: 25px; */
  margin-top: 25px;
}

.custom-filter {
  padding: 20px;
  background: var(--color-bg-5);
  border: 1px solid var(--color-neutral-3);
  border-radius: var(--border-radius-medium);
  box-shadow: 0 2px 5px rgb(0 0 0 / 10%);
}

.custom-filter-footer {
  display: flex;
  justify-content: space-between;
}
</style>